<template>
  <li class="bg-gray-50 rounded-lg p-4 border border-gray-200 transition-all hover:shadow-md">
    <div class="flex items-center justify-between">
      <div class="flex items-start">
        <input 
          type="checkbox" 
          :checked="todo.completed" 
          @change="handleToggle" 
          class="mt-1 h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer"
        >
        <div class="ml-3 flex-1">
          <div v-if="!isEditing" class="cursor-pointer">
            <p :class="{ 'line-through text-gray-500': todo.completed, 'text-gray-800': !todo.completed }" @dblclick="startEditing">
              {{ todo.title }}
            </p>
            <p class="text-xs text-gray-500 mt-1">
              创建于: {{ formatDate(todo.createdAt) }}
            </p>
          </div>
          <div v-else>
            <input 
              type="text" 
              v-model="editedTitle" 
              class="w-full px-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              @blur="saveEdit"
              @keyup.enter="saveEdit"
              @keyup.escape="cancelEdit"
              ref="editInput"
              autofocus
            >
          </div>
        </div>
      </div>
      <div class="flex items-center space-x-2">
        <button 
          v-if="!isEditing && !todo.completed" 
          @click="startEditing" 
          class="text-gray-500 hover:text-blue-600 transition-colors"
        >
          <i class="fa fa-pencil"></i>
        </button>
        <button 
          @click="handleDelete" 
          class="text-gray-500 hover:text-red-600 transition-colors"
        >
          <i class="fa fa-trash"></i>
        </button>
      </div>
    </div>
  </li>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, onMounted, nextTick } from 'vue'

const props = defineProps<{
  todo: { id: number, title: string, completed: boolean, createdAt: Date }
}>()

const emits = defineEmits<{
  (e: 'toggle-todo', id: number): void
  (e: 'delete-todo', id: number): void
  (e: 'edit-todo', id: number, title: string): void
}>()

const isEditing = ref(false)
const editedTitle = ref(props.todo.title)
const editInput = ref<HTMLInputElement | null>(null)

const handleToggle = () => {
  emits('toggle-todo', props.todo.id)
}

const handleDelete = () => {
  emits('delete-todo', props.todo.id)
}

const startEditing = () => {
  if (!props.todo.completed) {
    isEditing.value = true
    editedTitle.value = props.todo.title
    nextTick(() => {
      editInput.value?.focus()
      editInput.value?.select()
    })
  }
}

const saveEdit = () => {
  if (editedTitle.value.trim() !== props.todo.title) {
    emits('edit-todo', props.todo.id, editedTitle.value.trim())
  }
  isEditing.value = false
}

const cancelEdit = () => {
  editedTitle.value = props.todo.title
  isEditing.value = false
}

const formatDate = (date: Date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>
  